<template>
    <div>
        <div class="author-demo">
            <div>作者：陈炼</div>
            <div>日期：2017/11/02</div>
        </div>
        <z-button type="ensure" shape="rect" @click="info">显示普通提醒</z-button>
        <z-button type="ensure" shape="rect" @click="success">显示成功提示</z-button>
        <z-button type="ensure" shape="rect" @click="error">显示错误提示</z-button>
        <z-button type="ensure" shape="rect" @click="warning">显示警告提示</z-button>

        <pre style="background-color: #ececec;">

            <code class="html" v-text="htmlCode1">
            </code>
        </pre>
        <pre style="background-color: #ececec;">

            <code class="html" v-text="htmlCode2">
            </code>
        </pre>
        <pre style="background-color: #ececec;">

            <code class="html" v-text="htmlCode3">
            </code>
        </pre>
        <pre style="background-color: #ececec;">

            <code class="html" v-text="htmlCode4">
            </code>
        </pre>
        <div style="color:#f00;padding-left:55px;">第一种模式普通信息提示，第二种成功提示，第三种错误和失败提示，第四种非常严重的警告提示（很少用到的场景，比如系统崩溃，服务器异常）。</div>
    </div>
</template>
<script>
    export default{
        data () {
            return {
                htmlCode1:'this.$Message.info({\n' +
                '                    content:\'消息提示文案\',\n' +
                '                    duration: 2,\n' +
                '                    className: \'ivu-message-info-g\'\n' +
                '                });',
                htmlCode2:'this.$Message.success({\n' +
                '                    content:\'成功提示文案\',\n' +
                '                    duration: 2,\n' +
                '                    className: \'ivu-message-success-g\'\n' +
                '                });',
                htmlCode3:'this.$Message.error({\n' +
                '                    content:\'错误提示文案\',\n' +
                '                    duration: 2,\n' +
                '                    className: \'ivu-message-error-g\'\n' +
                '                });',
                htmlCode4:'this.$Message.warning({\n' +
                '                    content:\'警告提示文案\',\n' +
                '                    duration: 2,\n' +
                '                    className: \'ivu-message-warning-g\'\n' +
                '                });',
            }
        },
        methods: {
            info () {
                this.$Message.info({
                    content:'消息提示文案',
                    duration: 2,
                    className: 'ivu-message-info-g'
                });
            },
            success () {
                this.$Message.success({
                    content:'成功提示文案',
                    duration: 2,
                    className: 'ivu-message-success-g'
                });
            },
            error () {
                this.$Message.error({
                    content:'错误提示文案',
                    duration: 2,
                    className: 'ivu-message-error-g'
                });
            },
            warning () {
                this.$Message.warning({
                    content:'警告提示文案',
                    duration: 2,
                    className: 'ivu-message-warning-g'
                });
            }
        }
    }
</script>
